<script setup>
import MenuList from "@/components/MenuList.vue";
import HeaderContent from "../components/HeaderContent.vue";
import {ref, reactive} from 'vue'
import { getSysInfos } from "../api/api.js"

const info = reactive({
    mq_id: "",
    mq_ip: "",
    mq_state: false,
    mq_port: 0,
    server_ip:"",
    server_port:"",
    color: "",
    msg: "",
})

const getSystemInfo = () => {
    getSysInfos().then(function (response) {
        var is_connected = false
        is_connected = response.data.mq_state
        if (is_connected === true){
            info.color = "#2da700"
            info.msg = "MQ连接成功"
        }else{
            info.color = "#d80b00"
            info.msg = "MQ连接失败"
        }
        info.mq_id = response.data.mq_id
        info.mq_state = is_connected
        info.mq_ip = response.data.mq_ip
        info.mq_port = response.data.mq_port
        info.server_ip = response.data.server_ip
        info.server_port = response.data.server_port
    })
    .catch(function (error) {
        console.log(error);
    })
    .finally(function () {
        // 总是会执行
    });
}
getSystemInfo()

</script>


<template>
    <div class="common-layout">
        <el-container>
            <el-header class="header">
                <HeaderContent :info="info"/>
            </el-header>
            <el-container>
                <el-aside width="200px">
                    <MenuList />
                </el-aside>
                <el-main>
                    <!-- <slot :info="info"></slot> -->
                    <router-view />
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<style>
.header {
    height: 50px;
    border-radius: 3px;
    margin-bottom: 5px;
}
</style>